<template>
  <div class="test">
    <div id="atable" style="width: 1200px; height: 800px;" ></div>
	<div id="btable" style="width: 1200px; height: 800px;" ></div>
  </div>
  
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'Echartstwo',
    methods:{
        myEchartstwo(){
            var chart = echarts.init(document.getElementById('atable'));
            var info1 = [168,68];
      var info2 = [123,48];
            var testdata = [info1,info2];
            var option = {
                title: {
                    text: "Main Title",
                    subtext: "Sub Title",
                    left: "center",
                    top: "center",
                    textStyle:{ /*主标题*/
                    fontSize: 40,
                    color:'red',
                    fontWeight:'bold',
                    fontStyle:'italic'
                    },
                    subtextStyle: { /*副标题*/
                    fontSize: 20,
                    fontWeight:'bolder'
                    },
                },
                legend: {},
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                        },
                    position: function (pos, params, el, elRect, size) {
                        var obj = {top: 10};
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                        return obj;
                    },
                    extraCssText: 'width: 170px'
                },
                
                dataset:{
                    source: thedata},
                xAxis:[{
                    type:'category'
                            
                },
                {
                    type:'category'
                    
                }
                ],
                yAxis:[{
                    type:'value'
                    
                },{
                    type:'value'
                    
                }
                ],
                series:[
                    {
                        name:'value',
                        type:'line'
                            
                    },
                    {
                        name:'value2',
                        type:'line'
                    }
                ]
            };
            chart.setOption(option);
        }
    },

    mounted() {
      let a = document.getElementById('atable')
      let b = a.parentNode.parentNode
      a.style.width = b.offsetWidth -118 + 'px'
      a.style.height = b.offsetHeight - 15 + 'px'
      this.myEchartstwo();

    }
}

</script>
